<template>
  <div>
    <van-nav-bar
      title=""
      left-text=""
      right-text=""
      left-arrow
      @click-left="onClickCancel"
    />

    <van-divider />

    <template v-if="viewType2 === 'list'">
      <van-cell is-link arrow-direction="down">
        <template v-for="tag in searchBoxValue">
          <van-tag :key="tag.key" closeable size="large" type="primary">
            {{ tag.label }}
          </van-tag>
        </template>
      </van-cell>

      <van-button @click="showSearchPopup = true">筛选</van-button>

      <van-popup
        v-model="showSearchPopup"
        position="bottom"
        :style="{ height: '50%', width: '100%' }"
      >
        <van-picker
          title=""
          show-toolbar
          :columns="
            searchBtnOptions.map(it => {
              return { ...it, disabled: it.type === 'separator' }
            })
          "
          @confirm="handleSearchConfirm"
        >
          <template #option="item">
            <template v-if="item.type === 'separator'">
              <van-divider />
            </template>

            <template v-else>
              <van-icon :name="item.checked ? 'success' : 'plus'" />
              <span> {{ item.string }} </span>
            </template>
          </template>
        </van-picker>
      </van-popup>

      <van-divider />
      {{ hideButton }}
      <van-button
        v-if="!hideButton.create"
        type="primary"
        @click="handleOnCreate"
        >创建</van-button
      >
    </template>

    <template v-else-if="viewType2 === 'form'">
      <template v-if="editable">
        <van-button type="primary" @click="handleOnCommit"> 保存 </van-button>
        <van-divider />
        <van-button @click="handleOnRollback">取消</van-button>
      </template>

      <template v-else>
        <van-button type="primary" @click="handleOnWrite">编辑</van-button>
      </template>
    </template>

    <template v-else> </template>
  </div>
</template>

<script>
import api from '@/odooapi'

import searchViewMixin from '@/mixins/searchViewMixin'

// eslint-disable-next-line no-unused-vars
const cp = val => JSON.parse(JSON.stringify(val))

export default {
  name: 'SearchPicker',
  components: {},
  mixins: [searchViewMixin],

  props: {
    viewType2: { type: String, default: '' },
    editable: { type: Boolean, default: false }
  },

  data() {
    return {
      showSearchPopup: false
    }
  },

  computed: {
    hideButton() {
      return api.Views.hide_button(this.viewInfo, this.viewType)
    }
  },

  created() {},

  methods: {
    handleSearchConfirm(item) {
      // console.log('handleSearchConfirm', cp(this.searchBtnOptions))
      // console.log('handleSearchConfirm', item)
      console.log('handleSearchConfirm', cp(this.searchBoxValue))
      this.handleOnSearchSelect(item.name, !item.checked)

      console.log('handleSearchConfirm', this.searchBoxValue)
    },

    onClickCancel() {
      this.$emit('cancel')
    },

    handleOnCreate() {
      this.$emit('on-event', 'on-new')
    },

    // form view edit
    handleOnWrite() {
      // console.log(' handleOnWrite ')
      this.$emit('update:editable', true)
      this.$emit('cancel')
      this.$emit('on-event', 'on-form-event', 'on-edit')
    },

    handleOnCommit() {
      this.$emit('on-event', 'on-form-event', 'on-commit')
      this.$emit('cancel')
    },

    handleOnRollback() {
      this.$emit('on-event', 'on-form-event', 'on-rollback')
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped></style>
